<template>
  <div class="big_login">
    <h1>店铺商家管理平台</h1>
    <div class="login">
      <h2>系统登陆</h2>
      <el-input
        prefix-icon="el-icon-s-custom"
        class="account"
        placeholder="请输入帐号( •̀ ω •́ )✧"
        v-model="acc"
        clearable
      >
      </el-input>
      <el-input
        prefix-icon="el-icon-lock"
        class="password"
        placeholder="请输入密码（￣︶￣）↗"
        v-model="pwd"
        show-password
      ></el-input>
      <p
        class="el-icon-warning"
        style="color: #f56c6c; margin-top: 20px"
        v-show="user_show"
      >
        请检查帐号或密码是否正确!!
      </p>
      <el-button
        class="loginBtn"
        type="danger"
        plain
        @click="loginBtn"
        style="border: 1px solid #ffcc00"
        >登 录</el-button
      >

      <Vcode
        :show="isShow"
        @success="success"
        @close="close"
        :canvasWidth="canvasWidth"
        :canvasHeight="canvasHeight"
      />
      
    </div>
  </div>
</template>

<script>
import { login } from "../apis/users";
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      acc: "",
      pwd: "",
      user_show: false, //登录错误提示
      isShow: false, //验证码模态框
      canvasWidth: 450, //模态框宽
      canvasHeight: 350, //模态框高
    };
  },
  methods: {
    //点击登录
    loginBtn() {
      //弹出验证码模态框
      this.isShow = true;
    },
    //成功
    success() {
      // console.log(msg);

      //登录
      login({ account: this.acc, password: this.pwd }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.$message({
            message: "系统提示:  " + this.acc + "登录成功",
            type: "success",
          });
          localStorage.setItem("userId", res.data.id);
          localStorage.token = res.data.token;
          localStorage.role = res.data.role;
          this.$router.push("/home/main");
          //停止动画
          this.$confetti.stop();

          //滑块用时
          // this.$message({
          //   message: "系统提示: 用时: " + msg.toFixed(1) + "s",
          //   type: "success",
          // });
        } else {
          this.user_show = true;
        }
      });
      //关闭验证码弹框
      this.isShow = false;
    },
    //点击蒙层关闭验证码弹框
    close() {
      this.isShow = false;
    },
  },
  components: {
    Vcode,
  },
  created() {
    
    
    this.$confetti.start();

    this.$confetti.update({
          particles: [
            {
              type: 'heart',
            },
            {
              type: 'heart',
            },
          ],
          defaultColors: [
            '#ffcc00',
            '#99cc33',
            '#f56c6c'
          ],
        });
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
html,
body,
.big_login {
  width: 100%;
  height: 100%;
  background: #fff;
  background: url("../assets/imgs/1.jpeg") no-repeat;
  background-size: 100% 110%;
  background-position: right;
}
h1{
  padding: 100px;
  padding-left: 100px;
  color: #99cc33;
  text-shadow: 2px 2px 5px #ffcc00;
}
.login {
  padding: 20px;
  background: rgba(153, 204, 51, 0.7);
  height: 260px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -220px;
  text-align: center;
  border-radius: 6px;

  h2 {
    color: #fff;
  }
  .account,
  .password,
  .loginBtn {
    width: 400px;
    margin-top: 20px;
    height: 40px;
  }
  .el-button {
    color: #ffcc00;
    //  background-color: rgba(255, 255, 255, 0.8);
  }
  .el-button:hover {
    background: rgba(255, 204, 0, 0.8);
    color: #fff;
  }
}
</style>